import {
  Component,
  OnInit,
  Inject,
  AfterViewInit,
  ElementRef,
  OnDestroy
} from "@angular/core";
import { PLATFORM_ID, APP_ID } from "@angular/core";
import { isPlatformBrowser, isPlatformServer } from "@angular/common";
import { LocaleService, TranslationService, Language } from "angular-l10n";
import { Title } from "@angular/platform-browser";
import { Direction } from "@angular/cdk/bidi";
import Scrollbar from "smooth-scrollbar";
// import { environment as devEnvironment } from "@environment/environment.dev";
// import { environment as ehEnvironment } from "@environment/environment.eh";
// import { environment as rcEnvironment } from "@environment/environment.rc";
// import { environment as prodEnvironment } from "@environment/environment.prod";
// import { environment as testEnvironment } from "@environment/environment.test";
import { environment } from "@environment/environment";

import {
  Router,
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";

import {
  catchError,
  exhaustMap,
  map,
  tap,
  filter,
  take,
  skip
} from "rxjs/operators";
import { Store, select } from "@ngrx/store";
import * as fromUser from "@/user/store/reducers/index";
import * as fromRoot from "@/reducers/index";
import { Subscription, Subject, Observable, of, combineLatest } from "rxjs";
import { UserActions } from "@/user/store/actions";
import { combineAll, debounceTime, skipWhile } from "rxjs/operators";
import {
  NavigationEnd,
  ActivatedRoute,
  GuardsCheckStart
} from "@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
/**
 * AppComponent class doesn't use decorators
 * because the view uses only directives and not the pipes to get the translation.
 */
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
  isLogin$ = this.store.pipe(
    select(fromRoot.userRes),
    filter(e => e.code !== -1),
    map(e => e.code === 200)
  );

  sub$ = {
    eventSub$: null
  };

  @Language() lang: string;
  isServer: boolean;
  // 是否开启 环境调试模式
  isEnv = false;
  // mode = [
  //   {
  //     label: "eh",
  //     env: ehEnvironment
  //   },
  //   {
  //     label: "dev",
  //     env: devEnvironment
  //   },
  //   {
  //     label: "test",
  //     env: testEnvironment
  //   },
  //   {
  //     label: "rc",
  //     env: rcEnvironment
  //   },
  //   {
  //     label: "prod",
  //     env: prodEnvironment
  //   }
  // ];
  constructor(
    @Inject("StoreService") private storeService,
    @Inject("UtilsService") private utilsService,
    @Inject(PLATFORM_ID) private platformId: Object,
    public locale: LocaleService,
    public translation: TranslationService,
    public title: Title,
    @Inject("CookieService") private cookieService,
    @Inject("ConfigService") private configService,
    private router: Router,
    el: ElementRef,
    private store: Store<fromUser.State | fromRoot.State>
  ) {
    this.isServer = isPlatformServer(platformId);
    if (this.isEnv) {
      const env = this.cookieService.getObject("env");
      if (!!env) {
        Object.assign(environment, env);
      }
    }
  }

  ngAfterViewInit() {
    // Scrollbar.init(document.querySelector("[data-scrollbar]"));
  }

  onChangeEnv(item) {
    this.cookieService.putObject("env", item.env);
    location.reload();
  }

  ngOnInit() {
    if (!this.isServer) {
      // Scrollbar.initAll();
      // 初始化配置
    }
    this.addListen();
  }

  addListen() {
    this.sub$.eventSub$ = this.router.events.subscribe(
      (event: GuardsCheckStart) => {
        if (event instanceof GuardsCheckStart) {
          // 当导航成功结束时执行
          this.store.dispatch(new UserActions.FindUser({ req: undefined }));
        }
      }
    );
  }

  ngOnDestroy() {
    this.utilsService.unsub();
  }
}
